<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="keywords" content="md,markdown,markdown-editor,wechat,official-account,yanglbme,doocs">
  <meta name="description" content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>微信 Markdown 编辑器</title>
  <link rel="shortcut icon" href="assets/images/favicon.png">
  <link rel="apple-touch-icon-precomposed" href="assets/images/favicon.png">
  <link rel="stylesheet" href="assets/css/loading.css">
  <link rel="stylesheet" href="libs/css/index.css">

  <link rel="stylesheet" href="libs/css/xq-light.min.css">
  <link rel="stylesheet" href="libs/css/code-themes/github-v2.min.css">
  <link rel="stylesheet" href="assets/css/app.css">

  <!-- codemirror -->
  <link rel="stylesheet" href="libs/css/codemirror.min.css">
  <link rel="stylesheet" href="libs/css/show-hint.css">
  <link rel="stylesheet" href="libs/css/style-mirror.css">

  <link rel="stylesheet" href="libs/css/animate.css">

  <!-- 默认CSS/JS -->
  <script src="assets/scripts/themes/default-theme-css.js"></script>
  <script src="assets/scripts/default-content.js"></script>
</head>

<body>
  <!--loading 界面-->
  <div class="loading" id="loading">
    <div class="loading-wrapper">
      <div class="loading-text">Loading...</div>
      <div class="loading-anim"></div>
    </div>
  </div>

  <!--应用主体-->
  <div id="app" class="container">
    <el-container>
      <el-header class="top">
        <!-- 图片上传 -->
        <el-upload action="https://imgkr.com/api/files/upload" headers="{'Content-Type': 'multipart/form-data'}"
          :show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file" :on-success="uploaded">
          <el-tooltip class="item" effect="dark" content="点击上传图片" placement="bottom-start">
            <i class="el-icon-upload" size="medium">&nbsp;</i>
          </el-tooltip>
        </el-upload>
        <!-- 下载文本文档 -->
        <el-tooltip class="item" effect="dark" content="点击下载编辑框Markdown文档" placement="bottom-start">
          <i class="el-icon-download" size="medium" @click="downloadEditorContent">&nbsp;</i>
        </el-tooltip>
        <!-- 页面重置 -->
        <el-tooltip class="item" effect="dark" content="点击重置页面" placement="bottom-start">
          <i class="el-icon-refresh" size="medium" @click="reset">&nbsp;</i>
        </el-tooltip>
        <el-form size="mini" class="ctrl" :inline=true>
          <el-form-item>
            <el-select v-model="currentFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
              <el-option v-for="font in builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
                :label="font.label" :value="font.value">
                <span class="select-item-left">{{ font.label }}</span>
                <span class="select-item-right">Abc</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="currentSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
              <el-option v-for="size in sizeOption" :key="size.value" :label="size.label" :value="size.value">
                <span class="select-item-left">{{ size.label }}</span>
                <span class="select-item-right">{{ size.desc }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="currentColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
              <el-option v-for="color in colorOption" :key="color.value" :label="color.label" :value="color.value">
                <span class="select-item-left">{{ color.label }}</span>
                <span class="select-item-right">{{ color.hex }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-tooltip content="自定义颜色" placement="top">
            <el-color-picker v-model="currentColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
          </el-tooltip>
          &nbsp;&nbsp;
          <el-tooltip content="微信外链自动转为文末引用" placement="top">
            <el-switch v-model="status" active-color="#67c23a" inactive-color="#dcdfe6" @change="statusChanged">
            </el-switch>
          </el-tooltip>
        </el-form>
        <el-tooltip class="item" effect="dark" content="自定义CSS样式" placement="left">
          <el-button type="success" plain size="medium" icon="el-icon-setting" @click="customStyle"></el-button>
        </el-tooltip>
        <el-button type="success" plain size="medium" @click="copy">复制</el-button>
        <el-button type="success" plain size="medium" class="about" @click="aboutDialogVisible = true">关于</el-button>
      </el-header>
      <el-main class="main-body">
        <el-row :gutter="10" class="main-section">
          <el-col :span="12">
            <textarea id="editor" type="textarea" placeholder="Your markdown text here." v-model="source">
              </textarea>
          </el-col>
          <el-col :span="12" class="preview-wrapper" id="preview">
            <section>
              <div class="preview" contenteditable="true">
                <section id="output" v-html="output">
                </section>
              </div>
            </section>
          </el-col>
          <transition name="custom-classes-transition" enter-active-class="animated bounceInRight">
            <el-col id="cssBox" :span="12" v-show="showBox">
              <textarea id="cssEditor" type="textarea" placeholder="Your custom css here.">
                </textarea>
            </el-col>
          </transition>

        </el-row>
      </el-main>
    </el-container>
    <el-dialog title="关于" :visible.sync="aboutDialogVisible" width="30%" center>
      <div style="text-align: center;">
        <h3>一款高度简洁的微信 Markdown 编辑器</h3>
      </div>
      <div style="text-align: center;margin-top:10px;">
        <p>扫码关注我的公众号，原创技术文章第一时间推送！</p>
        <img src="assets/images/qrcode-for-doocs.jpg" style="width: 40%; display: block; margin: 20px auto 10px;">
      </div>
      <span slot="footer" class="dialog-footer">
        <a href="https://github.com/doocs/md" target="_blank">
          <el-button type="success" plain>GitHub 仓库</el-button>
        </a>
        <a href="https://gitee.com/doocs/md" target="_blank">
          <el-button type="success" plain>Gitee 仓库</el-button>
        </a>
      </span>

    </el-dialog>
  </div>

  <script src="libs/scripts/vue.min.js"></script>
  <script src="libs/scripts/axios.min.js"></script>
  <script src="libs/scripts/marked.min.js"></script>

  <!-- codemirror -->
  <script src="libs/scripts/codemirror/codemirror.min.js"></script>
  <script src="libs/scripts/codemirror/css.js"></script>
  <script src="libs/scripts/codemirror/matchbrackets.js"></script>
  <script src="libs/scripts/codemirror/active-line.js"></script>
  <script src="libs/scripts/codemirror/show-hint.js"></script>
  <script src="libs/scripts/codemirror/css-hint.js"></script>
  <script src="libs/scripts/codemirror/format.js"></script>

  <script src="libs/scripts/markdown.min.js"></script>
  <script src="libs/scripts/prettify.min.js"></script>
  <script src="libs/scripts/index.js"></script>
  <script src="libs/scripts/jquery.min.js"></script>
  <script src="libs/scripts/closebrackets.js"></script>

  <script src="assets/scripts/sync-scroll.js"></script>
  <script src="assets/scripts/themes/default-theme.js"></script>
  <script src="assets/scripts/renderers/wx-renderer.js"></script>
  <script src="assets/scripts/util.js"></script>
  <script src="assets/scripts/editor.js"></script>
  <script src="assets/scripts/loading.js"></script>

</body>
</html>